<script setup lang="ts">
console.log("hello world")
</script>

<template>
<section class="title">
    <h3>家用电器</h3>
    <ul>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
        <li>热门</li>
    </ul>
</section>
<section class="productions">
    <div class="first-section">
        <ul>
            <li>节能补贴</li>
            <li>节能补贴</li>
            <li>节能补贴</li>
            <li>节能补贴</li>
            <li>节能补贴</li>
            <li>节能补贴</li>
        </ul>
        <div>
            <img src="./images/floor-1-1.png" alt="">
        </div>
    </div>
    <div class="second-section"></div>
    <div class="third-section">
        <div><img src="./images/floor-1-2.png" alt=""></div>
        <div><img src="./images/floor-1-3.png" alt=""></div>
    </div>
    <div class="fourth-section">
        <img src="./images/floor-1-4.png" alt="">
    </div>
    <div class="fifth-section">
        <div><img src="./images/floor-1-5.png" alt=""></div>
        <div><img src="./images/floor-1-6.png" alt=""></div>
    </div>
</section>
</template>

<style scoped lang="less">

.title{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    h3{
        font-size: 20px;
        color: #c81623;
        font-weight: 700;
    }
    ul{
        display: flex;
        font-size: 12px;
        color: #666;
        line-height: 18px;
        li{
            padding: 0 5px;
        }
    }
}

.productions{
    border-top: 2px solid red;
    border: 1px solid black;
    height: 400px;
    display: flex;
    .first-section{
        width: 18%;
        height: 100%;
        border: 1px solid red;
        ul{
            font-size: 12px;
            text-align: center;
            line-height: 26px;
                display: grid;
                grid-template-columns: repeat(2, auto);
            
                li {
                    margin: 0 10px;
                    border-bottom: 1px solid #000;
                }
            }
    }
    .second-section{
        width: 28%;
        height: 100%;
        border: 1px solid red;
    }
    .third-section{
        width: 18%;
        height: 100%;
        border: 1px solid red;
    }
    .fourth-section{
        width: 18%;
        height: 100%;
        border: 1px solid red;
    }
    .fifth-section{
        width: 18%;
        height: 100%;
        border: 1px solid red;
    }
}
</style>